<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="交易流水号" prop="transactionNo">
        <el-input
          v-model="queryParams.transactionNo"
          placeholder="请输入交易流水号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="交易类型" prop="transactionType">
        <el-select v-model="queryParams.transactionType" placeholder="请选择交易类型" clearable>
          <el-option label="销售" value="1" />
          <el-option label="退货" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="收银员" prop="cashierId">
        <el-input
          v-model="queryParams.cashierId"
          placeholder="请输入收银员ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备" prop="deviceId">
        <el-input
          v-model="queryParams.deviceId"
          placeholder="请输入设备ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="柜组" prop="groupId">
        <el-input
          v-model="queryParams.groupId"
          placeholder="请输入柜组ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['pos:transaction:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="transactionList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="交易ID" align="center" prop="transactionId" width="80" />
      <el-table-column label="交易流水号" align="center" prop="transactionNo" width="150" />
      <el-table-column label="交易类型" align="center" prop="transactionType" width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.transactionType === '1' ? 'success' : 'warning'">
            {{ scope.row.transactionType === '1' ? '销售' : '退货' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="总金额" align="center" prop="totalAmount" width="100">
        <template slot-scope="scope">
          <span style="color: #E6A23C; font-weight: bold;">¥{{ scope.row.totalAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" align="center" prop="payAmount" width="100">
        <template slot-scope="scope">
          <span style="color: #67C23A; font-weight: bold;">¥{{ scope.row.payAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="找零金额" align="center" prop="changeAmount" width="100">
        <template slot-scope="scope">
          <span style="color: #F56C6C; font-weight: bold;">¥{{ scope.row.changeAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收银员" align="center" prop="cashierName" width="100" />
      <el-table-column label="设备" align="center" prop="deviceCode" width="100" />
      <el-table-column label="柜组" align="center" prop="groupName" width="100" />
      <el-table-column label="交易时间" align="center" prop="transactionTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.transactionTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            v-hasPermi="['pos:transaction:query']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-printer"
            @click="handlePrint(scope.row)"
            v-hasPermi="['pos:transaction:query']"
          >打印</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-check"
            @click="handleValidate(scope.row)"
            v-hasPermi="['pos:transaction:edit']"
          >校验</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 交易小票详情对话框 -->
    <el-dialog title="交易小票详情" :visible.sync="detailOpen" width="800px" append-to-body>
      <el-tabs v-model="activeTab" type="border-card">
        <!-- 小票基本信息 -->
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="交易流水号">{{ transactionDetail.transactionNo }}</el-descriptions-item>
            <el-descriptions-item label="交易类型">
              <el-tag :type="transactionDetail.transactionType === '1' ? 'success' : 'warning'">
                {{ transactionDetail.transactionType === '1' ? '销售' : '退货' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="总金额">¥{{ transactionDetail.totalAmount }}</el-descriptions-item>
            <el-descriptions-item label="实付金额">¥{{ transactionDetail.payAmount }}</el-descriptions-item>
            <el-descriptions-item label="找零金额">¥{{ transactionDetail.changeAmount }}</el-descriptions-item>
            <el-descriptions-item label="折扣金额">¥{{ transactionDetail.discountAmount }}</el-descriptions-item>
            <el-descriptions-item label="收银员">{{ transactionDetail.cashierName }}</el-descriptions-item>
            <el-descriptions-item label="设备编码">{{ transactionDetail.deviceCode }}</el-descriptions-item>
            <el-descriptions-item label="柜组">{{ transactionDetail.groupName }} ({{ transactionDetail.groupCode }})</el-descriptions-item>
            <el-descriptions-item label="会员">{{ transactionDetail.memberName || '非会员' }}</el-descriptions-item>
            <el-descriptions-item label="交易时间">{{ parseTime(transactionDetail.transactionTime) }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ transactionDetail.remark || '无' }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        
        <!-- 商品明细 -->
        <el-tab-pane label="商品明细" name="details">
          <el-table :data="transactionDetails" border>
            <el-table-column label="商品编码" align="center" prop="goodsCode" width="120" />
            <el-table-column label="商品名称" align="center" prop="goodsName" width="200" />
            <el-table-column label="数量" align="center" prop="quantity" width="80" />
            <el-table-column label="单价" align="center" prop="unitPrice" width="100">
              <template slot-scope="scope">
                <span>¥{{ scope.row.unitPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="小计" align="center" prop="amount" width="100">
              <template slot-scope="scope">
                <span style="color: #E6A23C; font-weight: bold;">¥{{ scope.row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="折扣" align="center" prop="discount" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.discount }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <!-- 支付信息 -->
        <el-tab-pane label="支付信息" name="pays">
          <el-table :data="transactionPays" border>
            <el-table-column label="支付方式" align="center" prop="paymentTypeName" width="120" />
            <el-table-column label="支付金额" align="center" prop="payAmount" width="120">
              <template slot-scope="scope">
                <span style="color: #67C23A; font-weight: bold;">¥{{ scope.row.payAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="支付时间" align="center" prop="payTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.payTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="支付流水号" align="center" prop="payNo" width="150" />
            <el-table-column label="备注" align="center" prop="remark" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
        <el-button type="primary" @click="handlePrintDetail">打印小票</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSaleTicket, getSaleTicket, getSaleTicketDetails, getSaleTicketPays, validateSaleTicket } from "@/api/pos/transaction";

export default {
  name: "Transaction",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 交易小票表格数据
      transactionList: [],
      // 是否显示详情弹出层
      detailOpen: false,
      // 当前激活的标签页
      activeTab: 'basic',
      // 交易详情
      transactionDetail: {},
      // 交易明细
      transactionDetails: [],
      // 支付信息
      transactionPays: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        transactionNo: null,
        transactionType: null,
        cashierId: null,
        deviceId: null,
        groupId: null,
        startTime: null,
        endTime: null
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询交易小票列表 */
    getList() {
      this.loading = true;
      listSaleTicket(this.queryParams).then(response => {
        this.transactionList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.transactionId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 查看详情 */
    handleView(row) {
      this.activeTab = 'basic';
      this.transactionDetail = row;
      
      // 获取商品明细
      getSaleTicketDetails(row.transactionId).then(response => {
        this.transactionDetails = response.data;
      });
      
      // 获取支付信息
      getSaleTicketPays(row.transactionId).then(response => {
        this.transactionPays = response.data;
      });
      
      this.detailOpen = true;
    },
    /** 打印小票 */
    handlePrint(row) {
      this.$modal.msgInfo("打印功能待实现");
    },
    /** 打印详情小票 */
    handlePrintDetail() {
      this.$modal.msgInfo("打印功能待实现");
    },
    /** 校验小票 */
    handleValidate(row) {
      const validateData = {
        transactionId: row.transactionId,
        transactionNo: row.transactionNo,
        totalAmount: row.totalAmount,
        payAmount: row.payAmount
      };
      
      validateSaleTicket(validateData).then(response => {
        if (response.data.valid) {
          this.$modal.msgSuccess("小票校验通过");
        } else {
          this.$modal.msgError("小票校验失败：" + response.data.message);
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('pos/transaction/export', {
        ...this.queryParams
      }, `transaction_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
